<template>
  <div>
    <div class="add">
      <p class="goback" @click="goback">返回赏品列表</p>
      <div class="addgoods_form_ipt">
        <el-form
          :model="addPrizeInfo"
          status-icon
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="赏品名称" prop="name">
            <el-input
              type="text"
              v-model="addPrizeInfo.good_name"
              autocomplete="off"
            ></el-input>
          </el-form-item>
         
          <el-form-item label="赏品等级" prop="good_rarity">
            <el-radio-group v-model="addPrizeInfo.good_method" size="small">
              <el-radio-button
                v-for="(item, index) in game_methods"
                :key="index"
                :label="item.uuid"
                >{{ item.title }}</el-radio-button
              >
            </el-radio-group>
          </el-form-item>
        
          <el-form-item label="显示价格" prop="ip_family">
            <el-input
              placeholder="请输入显示价格"
              v-model="addPrizeInfo.price"
            ></el-input>
          </el-form-item>
          <el-form-item label="回收价格" prop="ip_family">
            <el-input
              placeholder="请输入回收价格"
              v-model="addPrizeInfo.recovery_price"
            ></el-input>
          </el-form-item>
          <el-form-item label="赏品数量" prop="ip_family">
            <el-input
              placeholder="请输入商品数量"
              v-model="addPrizeInfo.count"
            ></el-input>
          </el-form-item>
          <el-form-item label="上传商品图片">
            <el-upload
              action=""
              list-type="picture-card"
              :http-request="handlePictureCardPreview"
              ref="upload"
              :on-change="uploadTo"
              :on-preview="handlePictureCardPreview"
              :before-upload="beforeAvatarUpload"
              :on-remove="handleRemove"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible1">
              <img width="100%" :src="addPrizeInfo.good_url" alt="" />
            </el-dialog>
          </el-form-item>
        </el-form>
        <el-button type="primary" @click="postGoodInfo">确定</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { StatusCodes } from "http-status-codes";
import quanju from "../../../../api/jurisdiction";
export default {
  data() {
    return {
      ruleForm: {},
      visible: false,
      // 奖品列表显示
      dialogVisible1: false,
      uploadDisabled: false,
      basicInfo: {},
      addPrizeInfo: {},
      good_rarity: "",
      selectList: [],
      game_uuid: "", //盒子id
      game_name: "", //盒子名字
      game_goods: [], //盒子中的赏品
      game_methods: [], //全局赏的赏品类型
      warehouse_good_ip: "",
      warehouse_goods: [],
    };
  },
  created() {
    this.game_uuid = this.$route.params.id;
    if (this.$router.query.data) {
      this.addPrizeInfo = JSON.parse(this.$route.query.data);
      this.addPrizeInfo.price = this.addPrizeInfo.price / 100;
      this.addPrizeInfo.recovery_price = this.addPrizeInfo.recovery_price / 100;
    }
  },
  mounted() {
    this.getquanjumethods();
  },
  methods: {
    //获取全局赏模式
    async getquanjumethods() {
      await quanju.getgoodlevel({params:{game_type:1}}).then((res) => {
        console.log("全局赏模式", res);
        if (res.status == 200) {
          this.game_methods = res.data.data;
        }
      });
    },
    handleRemove() {},
    uploadTo(upFile) {
      let file = upFile.raw;
      let newName = file.name.substr(-3);
      console.log(newName);
      let num = crypto.randomUUID();
      let path = `test_upload/prize/${num}.${newName}`;
      quanju.uploadImg({ path: path }).then((res) => {
        console.log(res);
        let result = res.data;
        const data = new FormData();
        data.append("key", path);
        data.append("Signature", result.authorization);
        data.append("x-cos-security-token", result.token);
        data.append("x-cos-meta-fileid", result.cos_file_id);
        data.append("file", file, path);
        quanju.generalAPI(result.url, data).then((a) => {
          quanju
            .downloadImg({
              file_list: [
                {
                  fileid: res.data.file_id,
                  max_age: 0,
                },
              ],
            })
            .then((res) => {
              let yunurl = res.data.file_list[0].download_url;
              this.addPrizeInfo.good_url = yunurl;
              console.log(this.addPrizeInfo.good_url);
            });
        });
      });
    },
    beforeAvatarUpload(file) {},
    handlePictureCardPreview(file) {},
    handleSelectionChange() {},
    goback() {
      this.$router.push({
        name: "quanjushanggoods",
        params: { id: this.game_uuid },
      });
    },
    postGoodInfo() {
      console.log("赏品信息", this.addPrizeInfo);
      if (!this.addPrizeInfo.good_uuid) {
        if (this.addPrizeInfo.good_url) {
          quanju
            .postquanjugood({
              name: this.addPrizeInfo.good_name,
              display_url: this.addPrizeInfo.good_url,
              desc:'123',
              desc_url: this.addPrizeInfo.good_url,
              count: this.addPrizeInfo.count,
              price: this.addPrizeInfo.price * 100,
              recovery_price: this.addPrizeInfo.recovery_price * 100,
              ip_family: '123',
              game_uuid: this.game_uuid,
              method_uuid: this.addPrizeInfo.good_method,
            })
            .then((res) => {
              console.log(res);
              if (res.status == 201) {
                this.$message.success("添加成功");
                setTimeout(() => {
                  this.$router.push({
                    name: "quanjushanggoods",
                    params: { id: this.game_uuid },
                  });
                }, 500);
              }
            })
            .catch((error) => {
              console.log(error);
              this.$message.error(error.data.detail.name);
            });
        } else {
          this.$message.warning("图片上传中！请稍等");
        }
      } else {
        if (this.addPrizeInfo.good_url) {
          quanju
            .putquanjugoods({
              name: this.addPrizeInfo.good_name,
              display_url: this.addPrizeInfo.good_url,
              desc: this.addPrizeInfo.good_desc,
              desc_url: this.addPrizeInfo.good_url,
              count: this.addPrizeInfo.count,
              price: this.addPrizeInfo.price * 100,
              recovery_price: this.addPrizeInfo.recovery_price * 100,
              ip_family: this.addPrizeInfo.ip_family,
              game_uuid: this.game_uuid,
              method_uuid: this.addPrizeInfo.good_method,
              good_uuid: this.addPrizeInfo.good_uuid,
            })
            .then((res) => {
              console.log(res);
              if (res.status == 200) {
                this.$message.success("修改成功");
                setTimeout(() => {
                  this.$router.push({
                    name: "quanjushanggoods",
                    params: { id: this.game_uuid },
                  });
                }, 500);
              }
            })
            .catch((error) => {
              console.log(error);
              this.$message.error(error.data.detail.name);
            });
        } else {
          this.$message.warning("图片上传中！请稍等");
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.add {
  text-align: left;
  font-size: 15px;
  color: #7e7e7e;
}

.el-input {
  width: 500px;
}

p {
  margin: 25px;
}

.ip {
  margin: 10px;
}

// 图片上传
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9 !important;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: inline-block;
}

.confirm {
  width: 80px;
  height: 32px;
  color: white;
  line-height: 32px;
  background: #009688;
  border: 0;
  font-size: 13px;
  cursor: pointer;
}

.confirm1 {
  display: inline-block;
}

.find {
  display: inline-block;
  cursor: pointer;
}

.addGood,
.goback,
.find {
  display: inline-block;
  width: 120px;
  height: 35px;
  background: #409eff;
  border-radius: 3px;
  line-height: 35px;
  text-align: center;
  color: white;
  cursor: pointer;
}

.el-dialog {
  width: 1000px;
}

.goback,
.addPrice {
  display: inline-block;
}

.aaaa {
  position: absolute;
  margin-left: 116px;
  margin-top: -43px !important;
  z-index: 9999;
}

.transition-box {
  padding: 3px;
  border-radius: 4px;
  text-align: center;
  color: #fff;
  padding: 40px 20px;
  box-sizing: border-box;
  margin-right: 20px;
}

.good_weight_ipt {
  width: 75px;
}

.wuxian_goods_img,
.wuxian_goods_img > img {
  width: 90%;
  height: 90%;
}

.chakanliebiao_table {
  width: 800px;
  height: 600px;
  overflow-y: scroll;
}

.chakanliebiao_table::-webkit-scrollbar {
  width: 0;
}

.addGoods_form {
  margin-left: 20px;
}

.addgoods_form_ipt .el-input {
  width: 200px;
  height: 20px;
}

.disabled .el-upload--picture-card {
  display: none !important;
}
.good_desc {
  width: 80px;
}
</style>
